<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
      <img class="header-icon-img" src="assets/ad/nav_icon_back.png" alt="back">
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="bg">
    <p class="title">你正在申请加入蜂喔</p>
    <p class="tip">
      <span class="tip-item">提交审核</span>
      <i class="arrow"></i>
      <span class="tip-item">蜂喔审核</span>
      <i class="arrow"></i>
      <span class="tip-item">创建账号</span>
    </p>
    <form [formGroup]="myForm" class="form">
      <ion-item class="item ion-no-padding" detail=true>
        <ion-label class="item-label">申请类型</ion-label>
        <ion-input class="item-input-s" type="text"></ion-input>
        <span class="input" appDebounceClick (debounceClick)="showActionSheet()" *ngIf="register.typeName !== ''">{{register.typeName}}</span>
        <span class="input lightgrey" appDebounceClick (debounceClick)="showActionSheet()" *ngIf="register.typeName === ''">请选择</span>
      </ion-item>

      <ion-item lines="full" class="item ion-no-padding">
        <ion-label class="item-label">姓名</ion-label>
        <ion-input required class="item-input" required type="text" [(ngModel)]="register.name" placeholder="请填写"
          name="name" formControlName="name"></ion-input>
      </ion-item>

      <ion-item lines="full" class="item ion-no-padding">
        <ion-label required class="item-label">手机</ion-label>
        <ion-input class="item-input" maxlength="11" required type="mobile" [(ngModel)]="register.phone"
          placeholder="请填写" name="phone" formControlName="phone"></ion-input>
      </ion-item>
      <ion-item lines="full" class="item ion-no-padding">
        <ion-label required class="item-label">邀请码</ion-label>
        <ion-input class="item-input" type="mobile" [(ngModel)]="register.invitation" placeholder="选填" name="invitation"
          formControlName="invitation"></ion-input>
      </ion-item>
      <ion-item lines="full" class="item ion-no-padding">
        <ion-label required class="item-label">验证码</ion-label>
        <ion-input class="item-input" required type="text" maxlength="6" [(ngModel)]="register.vcode"
          placeholder="请填写验证码" name="vcode" formControlName="vcode"></ion-input>
        <button class="end" *ngIf="time>-1" [disabled]="time>-1"
          [ngClass]="{'lightgrey':time>-1}">({{time}})重新获取</button>
        <button class="end" *ngIf="time===-1" appDebounceClick (debounceClick)="getVC(myForm.get('phone').errors)">获取验证码</button>

      </ion-item>
      <ion-item *ngIf="showImgCode" lines="full" class="item ion-no-padding">
        <ion-label required class="item-label">图形验证</ion-label>
        <ion-input class="item-input" maxlength="4" required type="mobile" [(ngModel)]="register.imgcode"
          placeholder="请填写" name="imgcode" formControlName="imgcode"></ion-input>
        <div class="img-code-bg" appDebounceClick (debounceClick)="getImgCode()">
          <span class="refresh-text">刷新</span>
          <img src="{{imgCode}}" alt="" class="img-code">

        </div>

      </ion-item>

    </form>

    <p class="check-bg"><i appDebounceClick (debounceClick)="checkClick()" [ngClass]="{'uncheck': !checked,'checked': checked}"></i> <span
        appDebounceClick (debounceClick)="checkClick()">我已阅读并同意</span> <span class="xieyi" appDebounceClick (debounceClick)="xieyiClick()">《蜂喔用户协议》</span>
        <span class="xieyi" appDebounceClick (debounceClick)="alertPrivacyPolicy()">《隐私政策》</span></p>
    <div *ngIf="!isApp" appDebounceClick (debounceClick)="registerClick()" class="register-btn">注册并立即下载蜂喔客户端</div>
    <div *ngIf="isApp" appDebounceClick (debounceClick)="registerClick()" class="register-btn">提交并注册</div>
  </div>

  <div class="contact-bg" *ngIf="!isApp && user && user.name">
    <p class="desc">邀请信息</p>
    <div class="contact-person">
      <div class="person">
        <img src="{{user.avatarurl}}" class="avatar" alt="">
        <div class="detail-bg">
          <p class="name-bg"><span class="name">{{user.name}}</span><span class="tag">{{user.city}}</span></p>
          <p class="phone">{{user.mobile}}</p>

        </div>
      </div>
      <img class="call" appDebounceClick (debounceClick)="call()" src="assets/ad/icon_phone.png" alt="">
    </div>
  </div>
  <p class="cp">深圳蜂喔网络科技有限公司</p>
</ion-content>